<%--
  Created by IntelliJ IDEA.
  User: liuqing
  Date: 2024/11/20
  Time: 21:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="header.jsp"%>

<main>
  <section>
    <h4>修改的个人信息</h4>
    <form action="UserUpdateInfoServlet" method="post" id="userInfoForm">
      <div class="user-info">
        <div class="user-info-item">
          <div class="user-info-title">用户名：</div>
          <div class="user-info-content"><input type="text" name="username" value="${user.username}" required></div>
        </div>
        <div class="user-info-item">
          <div class="user-info-title">密码：</div>
          <div class="user-info-content"><input type="password" id="password" name="password" value="${user.password}" required></div>
        </div>
        <div class="user-info-item" id="confirmPasswordDiv" style="display: none;">
          <div class="user-info-title">重复密码：</div>
          <div class="user-info-content"><input type="password" name="confirmPassword"></div>
        </div>
        <div class="user-info-item">
          <div class="user-info-title">邮箱：</div>
          <div class="user-info-content"><input type="email" name="email" value="${user.email}" required></div>
        </div>
        <div class="user-info-item">
          <input type="submit" value="提交" class="update-button">
          <a href="userInfo.jsp" class="update-button">返回</a>
        </div>
      </div>
    </form>
  </section>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var passwordInput = document.getElementById('password');
    var confirmPasswordDiv = document.getElementById('confirmPasswordDiv');

    // 当密码输入框有输入时显示重复密码输入框
    passwordInput.addEventListener('blur', function() {
      if (this.value) {
        confirmPasswordDiv.style.display = 'block';
      } else {
        confirmPasswordDiv.style.display = 'none';
      }
    });
    passwordInput.addEventListener('focus', function() {
      if (this.value) {
        confirmPasswordDiv.style.display = 'block';
      } else {
        confirmPasswordDiv.style.display = 'none';
      }
    });
  });
</script>
<%@ include file="footer.jsp"%>
